<template>
	<view class="flex-col page">
		<view class="flex-col section_1">
			<!-- <view class="justify-center group">
        <image
          src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/617a2ca7e4f1450011362b37/62b127f6d029820011531bae/16557836621783633159.png"
          class="image" @click='returnC'
        />
        <text class="text">订单详情</text>
      </view> -->

			<view class="justify-between group_1" v-if="ordersStatus == 1">
				<view class="flex-col items-start group_2">
					<text class="text_1">补差价订单待付款</text>

					<view class="u-flex u-m-t-20">
						<text class="text_2">剩余时间：</text>
						<u-count-down :time="lefttime" format="HH:mm:ss"></u-count-down>
					</view>

				</view>
				<image
					src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/617a2ca7e4f1450011362b37/62b127f6d029820011531bae/16557836667030515678.png"
					class="image_1" />
			</view>


		</view>






		<view class="flex-col group_3">
			<view class="flex-col section_2">
				<view class="flex-row">
					<view class="section_3">
						<!--*-->
					</view>
					<text class="text_3">补差价订单</text>
				</view>
				<view class="justify-between group_5">
					<text class="text_4">你的房屋位置</text>
					<text class="text_5">{{infolist.position}}</text>
				</view>
				<view class="justify-between group_6">
					<text class="text_6">你的房屋面积</text>
					<text class="text_7">{{infolist.roomArea}}m²</text>
				</view>
				<view class="justify-between group_7">
					<text class="text_8">房屋类型</text>
					<text class="text_9">{{infolist.roomTypeName}}</text>
				</view>
			</view>
			<view class="flex-col section_4">
				<view class="flex-row group_8">
					<view class="section_3">
						<!--*-->
					</view>
					<text class="text_10">补差价订单</text>
				</view>
				<view class="flex-col u-m-t-20">
					<view class="">
						<text class="text_4">补价订单:</text><text
							class="text_4 u-m-l-10">{{infolist.replenishReason}}</text>
					</view>
					<view class="u-m-t-20">
						<text class="text_4">补价金额:</text><text class="text_444">￥{{infolist.payableMoney}}</text>
					</view>
				</view>
			</view>

			<!--  -->
			<view class="flex-col section_5">
				<view class="flex-row group_32">
					<view class="section_3 view_8">
						<!--*-->
					</view>
					<image
						src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/617a2ca7e4f1450011362b37/62b127f6d029820011531bae/16557836621826750433.png"
						class="image_10" />
				</view>
				<view class="flex-col group_33">
					<view class="flex-row justify-between" style="margin: 20rpx 0;">
						<view class="flex-row">
							<text class="text_37">订单编号</text>
							<text class="text_38">{{infolist.ordersNumber}}</text>
						</view>
						<text class="text_39" @click="copy(infolist.ordersNumber)">复制</text>
					</view>

					<view class="flex-row group_35">
						<text class="text_40">下单时间</text>
						<text class="text_41">{{infolist.ordersTime}} </text>
					</view>
				</view>
				<view class="flex-row group_36" v-if="ordersStatus != 1">
					<text class="text_42">付款金额</text>
					<text class="text_43">￥{{infolist.payableMoney}}</text>
				</view>
				<view class="flex-row group_37" v-if="ordersStatus != 1">
					<text class="text_44">支付方式</text>
					<text class="text_45" v-if="infolist.payType ==1">微信支付</text>
					<text class="text_45" v-if="infolist.payType==2">支付宝支付</text>
				</view>
				<view class="flex-row group_38" v-if="ordersStatus != 1">
					<text class="text_46">支付时间</text>
					<text class="text_47">{{infolist.payTime}}</text>
				</view>
			</view>
		</view>







		<view class="justify-between section_6 " v-if="ordersStatus == 1">
			<view class="flex-row group_39" @click="go('/pages/my/message/kefu')">
				<image
					src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/617a2ca7e4f1450011362b37/62b127f6d029820011531bae/16557836621862755728.png"
					class="image_11" />
				<text class="text_48">联系客服</text>
			</view>
			<view class="u-flex">
				<view class="flex-col items-center text-wrapper_22 u-m-r-20" @click="cancelT"><text
						class="text_35">取消订单</text></view>
				<view class="flex-col items-center text-wrapper_21" @click="topay"><text class="text_35">补差价</text>
				</view>
			</view>

		</view>
		<!--  -->

		<!--  -->

		<!--  -->
		<view class="justify-between section_6" v-if="ordersStatus == 5">
			<view class="flex-row group_39" @click="go('/pages/my/message/kefu')">
				<image
					src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/617a2ca7e4f1450011362b37/62b127f6d029820011531bae/16557836621862755728.png"
					class="image_11" />
				<text class="text_48">联系客服</text>
			</view>
		</view>


	</view>
</template>

<script>
	export default {
		components: {},
		data() {
			return {
				ordersId: "",
				ordersStatus: '',
				infolist: {},
				lefttime: 0,
				show: false,
				dateshow: false,
				timeShow: false,
				beginDate: Number(new Date()),
				dateText: '',
				timeText: ''
			};
		},
		onPullDownRefresh() {
			console.log('rrrr');
			this.getinfo();
			setTimeout(() => {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		onLoad(option) {

			this.ordersId = option.ordersId;
		},
		created() {
			this.getinfo()
		},
		methods: {
			qupj() {
				uni.navigateTo({
					url: '/pages/my/evaluate/evaluate?ordersId=' + this.ordersId
				})
			},
			setDate() {
				this.show = true;
			},
			copy(number) {

				uni.setClipboardData({
					data: number,
					success: (result) => {
						this.$u.toast('复制成功');
					},
					fail: (error) => {
						this.$u.toast('网络出错');
					}
				})
			},
			toWS() {
				this.$http('mine.updateOrdersStatus', {
					ordersId: this.ordersId,
					ordersStatus: '5'
				}).then(res => {
					if (res.code == 200) {
						uni.navigateTo({
							url: '/pages/my/order/order'
						})
					}
				}).catch(err => {

				})
			},
			modifyDate() {
				this.dateshow = true;
			},
			modifyTime() {
				this.timeShow = true;
			},
			confirm(e) {
				console.log(e);
				this.dateText = this.$u.timeFormat(e.value, 'yyyy-mm-dd');
				this.dateshow = false;
			},
			timeConfrim(e) {

				this.timeText = e.time;
				this.timeRange = e.timeArr;
				this.timeShow = false;
			},
			cancelT() {
				uni.navigateTo({
					url: '/pages/my/order/cancelOrder?ordersId=' + this.ordersId
				})
			},
			topay() {
				this.go('/pages/pay/pay?orderid=' + this.ordersId);
			},
			returnC() {
				// this.go('pages/my/order/order')
				uni.navigateBack({
					delta: 1
				})
			},
			getinfo() {
				this.$http('lorder.viewReplenishOrders', {
					replenishOrdersId: this.ordersId
				}).then(res => {

					if (res.code == 200) {
						this.infolist = res.data
						this.ordersStatus = res.data.ordersStatus;
						this.lefttime = this.timeProcessing(res.data.ordersTime);
						console.log(this.lefttime);



					} else {
						this.$u.toast(res.msg);
					}
				})
			},
			timeProcessing(e) {
				let timeDate = e;
				let Time = new Date(timeDate);
				let timestemp1 = Time.getTime();
				let timestamp2 = new Date().getTime();

				return timestemp1 + 86400000 - timestamp2;
			},
			lookEx() {
				// 没有页面
				uni.navigateTo({
					url: '/pages/my/order/checkFWDetail?ordersId=' + this.ordersId
				})
			},
			updatetime() {
				if (!this.dateText) {
					this.$u.toast('请选择日期');
					return;
				}
				if (!this.timeText) {
					this.$u.toast('请选择时间段');
					return;
				}
				this.$http('lorder.updatetime', {
					acceptanceServiceId: this.infolist.acceptanceSummary.acceptanceServiceId,
					isData: this.dateText,
					isTime: this.timeText
				}).then(r => {
					if (r.code == 200) {
						this.getinfo();
						this.$u.toast(r.msg);
						this.show = false;
					} else {
						this.$u.toast(r.msg);
					}
				});
			}
		},
	};
</script>

<style scoped lang="css">
	.lookJD {
		width: 80%;
		margin: 0 auto;
		height: 250rpx;
		margin-top: -90rpx;

	}

	.checktime {
		color: #1D6AFF;
		font-size: 32rpx;
		width: 100%;
		display: flex;
		justify-content: center;
		margin-top: 36rpx;
		margin-bottom: 30rpx;
	}

	.text-wrapper_23 {
		padding: 7px 0 11px;
		background-color: #3C55FE;
		border-radius: 16px;
		width: 86px;
		height: 32px;
	}

	.lookJDC {
		padding: 35rpx 55rpx;
		background-image: linear-gradient(180deg, #ffffff 0%, #ffffff 32.93%, #ebe8ff 100%, #ebe8ff 100%);
		border-radius: 16rpx;
		text-align: center;
	}

	.lookJDC text {
		color: #381cc6;
		font-size: 32rpx;
		line-height: 38rpx;
		font-family: ".AppleSystemUIFont";
		font-weight: 600;
	}

	.text-wrapper_22 {
		padding: 14rpx 0;
		background-color: #eee;
		border-radius: 16px;
		width: 86px;
		/* height: 32px; */
		margin-left: 20rpx;
	}

	.text-wrapper_22 .text_35 {
		color: #333;
		font-size: 28rpx;
	}

	.text-wrapper_21 {
		padding: 14rpx 0;
		background-color: #1d6aff;
		border-radius: 16px;
		width: 86px;
		/* height: 32px; */
		
	}

	.PJXX {
		color: #333;
		font-size: 26rpx;
	}

	.PJXX view {
		border: 1px solid #1d6aff;
		color: #1d6aff;
		background-color: rgba(29, 105, 255, 0.2);
		padding: 10rpx 20rpx;
		border-radius: 36rpx;
	}

	.PJXXIMG view {
		width: 200rpx;
		height: 140rpx;
	}

	.PJXXIMG view image {
		width: 100%;
		height: 100%;
	}

	.section_3 {
		margin-top: 10rpx;
		background-color: #1d6aff;
		border-radius: 3rpx;
		width: 6rpx;
		height: 28rpx;
	}

	.text-wrapper {
		margin-top: 25rpx;
		padding: 2rpx 0 12rpx;
		border-radius: 28rpx;
		background-image: url('https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/617a2ca7e4f1450011362b37/62b127f6d029820011531bae/16557836636771255872.png');
		background-size: 100% 100%;
		background-repeat: no-repeat;
		width: 120rpx;
		height: 40rpx;
	}

	.text-wrapper_1 {
		padding: 2rpx 0 12rpx;
		background-color: #1d6aff;
		border-radius: 20rpx;
		width: 114rpx;
		height: 40rpx;
	}

	.image_2 {
		width: 28rpx;
		height: 28rpx;
	}

	.text_13 {
		color: #1d6aff;
		font-size: 22rpx;
		font-family: '.AppleSystemUIFont';

	}

	.text_24 {
		color: #ffffff;
		font-size: 22rpx;
		font-family: '.AppleSystemUIFont';

	}

	.page {
		background-color: #f6f7f9ff;
		min-height: 100vh;
		width: 100vw;
		overflow-y: auto;
		overflow-x: hidden;
	}

	.section_1 {
		padding: 55rpx 24.5rpx 136.5rpx;
		background-image: url('https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/617a2ca7e4f1450011362b37/62b127f6d029820011531bae/16557836621628592893.png');
		background-position: 0% 0%;
		background-size: 100% 100%;
		background-repeat: no-repeat;
	}

	.group_3 {
		margin-top: -109rpx;
		padding: 0 24rpx 32rpx;
		position: relative;
		padding-bottom: 120rpx;
	}

	.section_6 {
		padding: 18rpx 24rpx 18rpx 34rpx;
		background-color: #ffffff;
		box-shadow: 0px -1rpx 0px 0px #eeeeee;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
	}

	.group {
		padding: 0 7.5rpx 4rpx;
		position: relative;
	}

	.group_1 {
		margin-top: 42.5rpx;
	}

	.section_2 {
		padding: 30rpx 22rpx 40rpx 24rpx;
		background-color: #ffffff;
		border-radius: 16rpx;
		margin-top: 20rpx;
	}

	.section_4 {
		margin-top: 21rpx;
		padding: 0 22rpx 31rpx 24rpx;
		background-color: #ffffff;
		border-radius: 16rpx;
	}

	.section_5 {
		margin-top: 20rpx;
		padding: 0 24rpx 34rpx;
		background-color: #ffffff;
		border-radius: 16rpx;
	}

	.group_39 {
		align-self: center;
	}

	.button {
		padding: 12rpx 0 22rpx;
		background-color: #1d6aff;
		border-radius: 32rpx;
		width: 200rpx;
		height: 64rpx;
	}

	.image {
		position: absolute;
		left: 7.5rpx;
		bottom: 0;
		width: 19rpx;
		height: 36rpx;
	}

	.text {
		color: #ffffff;
		font-size: 36rpx;
		font-family: '.AppleSystemUIFont';

	}

	.group_2 {
		padding-bottom: 6rpx;
		width: 300rpx;
		position: relative;
	}

	.image_1 {
		margin-right: 31.5rpx;
		width: 88rpx;
		height: 93rpx;
	}

	.group_5 {
		margin-top: 38rpx;
	}

	.group_6 {
		margin-top: 31rpx;
	}

	.group_7 {
		margin-top: 25rpx;
	}

	.group_8 {
		padding: 29rpx 4rpx 32rpx;
		border-bottom: solid 1rpx #eeeeee;
	}

	.group_9 {
		padding-top: 23rpx;
	}

	.group_12 {
		margin-top: 38rpx;
	}

	.group_15 {
		/* margin-top: 46rpx; */
	}

	.group_32 {
		padding: 28rpx 0 32rpx;
		border-bottom: solid 1rpx #eeeeee;
	}

	.group_33 {
		/* margin-top: 29rpx; */
	}

	::v-deep .u-count-down__text {
		color: #D3F9FF;
		font-size: 28rpx;
	}

	.group_36 {
		margin-top: 31rpx;
	}

	.group_37 {
		margin-top: 31rpx;
	}

	.group_38 {
		margin-top: 37rpx;
	}

	.image_11 {
		flex-shrink: 0;
		width: 36rpx;
		height: 35rpx;
	}

	.text_48 {
		margin-left: 18rpx;
		margin-bottom: 8.5rpx;
		color: #191919;
		font-size: 24rpx;
		font-family: '.AppleSystemUIFont';

	}

	.image_12 {
		width: 148rpx;
		height: 30rpx;
	}

	.text_1 {
		color: #ffffff;
		font-size: 32rpx;
		font-family: '.AppleSystemUIFont';

	}

	.text_2 {
		color: #ffffff;
		font-size: 24rpx;
		font-family: '.AppleSystemUIFont';


	}

	.text_3 {
		margin-left: 18rpx;
		color: #333333;
		font-size: 32rpx;
		font-family: '.AppleSystemUIFont';

	}

	.text_4 {
		color: #666666;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';

	}

	.text_444 {
		color: #D5724D;
		font-size: 28rpx;
		margin-top: 10rpx;
		margin-left: 6rpx;
		font-family: '.AppleSystemUIFont';

	}

	.text_5 {
		margin-right: 3rpx;
		color: #333333;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';

	}

	.text_6 {
		/* margin-bottom: 6rpx; */
		color: #666666;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';

	}

	.text_7 {
		/* margin-top: 6rpx; */
		color: #333333;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';

	}

	.text_8 {
		color: #666666;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';

	}

	.text_9 {
		color: #333333;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';

	}

	.text_10 {
		margin-left: 18rpx;
		color: #333333;
		font-size: 32rpx;
		font-family: '.AppleSystemUIFont';

	}

	.group_18 {
		margin-top: 38rpx;
	}

	.group_20 {
		margin-top: 44rpx;
	}

	.group_23 {
		/* margin-top: 46rpx; */
	}

	.view_8 {
		margin-top: 6rpx;
	}

	.image_10 {
		margin-left: 17rpx;
		width: 132rpx;
		height: 40rpx;
	}

	.text_39 {
		/* margin-right: 267rpx; */
		align-self: flex-end;
		color: #1c4ca8;
		font-size: 24rpx;
		font-family: '.AppleSystemUIFont';

	}

	.group_35 {
		margin-top: 9rpx;
	}

	.text_42 {
		margin-bottom: 6rpx;
		color: #999999;
		font-size: 24rpx;
		font-family: '.AppleSystemUIFont';

	}

	.text_43 {
		margin-left: 40rpx;
		margin-top: 6rpx;
		color: #fe641a;
		font-size: 24rpx;
		font-family: '.AppleSystemUIFont';

	}

	.text_44 {
		color: #999999;
		font-size: 24rpx;
		font-family: '.AppleSystemUIFont';

	}

	.text_45 {
		margin-left: 40rpx;
		color: #333333;
		font-size: 24rpx;
		font-family: '.AppleSystemUIFont';

	}

	.text_46 {
		margin-bottom: 6rpx;
		color: #999999;
		font-size: 24rpx;
		font-family: '.AppleSystemUIFont';

	}

	.text_47 {
		margin-left: 40rpx;
		margin-top: 6rpx;
		color: #333333;
		font-size: 24rpx;
		font-family: '.AppleSystemUIFont';

	}

	.text_12 {
		margin-top: 15rpx;
		color: #999999;
		font-size: 24rpx;
		font-family: '.AppleSystemUIFont';

	}

	.text_16 {
		margin-top: 15rpx;
		align-self: flex-start;
		color: #999999;
		font-size: 24rpx;
		font-family: '.AppleSystemUIFont';

	}

	.group_17 {
		margin-bottom: 6rpx;
	}

	.view_4 {
		margin-top: 0;
	}

	.text_21 {
		margin: 3rpx 0 5rpx;
		color: #ff371d;
		font-size: 24rpx;
		font-family: '.AppleSystemUIFont';

	}

	.view_5 {
		margin-top: 25rpx;
	}

	.group_26 {
		margin-top: 38rpx;
	}

	.divider {
		margin-top: 32rpx;
		background-color: #eeeeee;
		border-radius: 0.5rpx;
		height: 1rpx;
	}

	.group_28 {
		margin-top: 30rpx;
	}

	.group_29 {
		margin-top: 33rpx;
	}

	.group_30 {
		margin-top: 34rpx;
		padding-top: 27rpx;
		border-top: solid 1rpx #eeeeee;
	}

	.text_37 {
		margin-bottom: 6rpx;
		color: #999999;
		font-size: 24rpx;
		font-family: '.AppleSystemUIFont';

	}

	.text_38 {
		margin-left: 40rpx;
		/* margin-top: 6rpx; */
		color: #333333;
		font-size: 24rpx;
		font-family: '.AppleSystemUIFont';

	}

	.text_40 {
		margin-bottom: 6rpx;
		color: #999999;
		font-size: 24rpx;
		font-family: '.AppleSystemUIFont';

	}

	.text_41 {
		margin-left: 40rpx;
		/* margin-top: 6rpx; */
		color: #333333;
		font-size: 24rpx;
		font-family: '.AppleSystemUIFont';

	}

	.text_11 {
		margin-bottom: 3rpx;
		color: #333333;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';

	}

	.image_3 {
		margin: 8rpx 28rpx 0 15rpx;
	}

	.text_15 {
		margin-bottom: 3rpx;
		color: #333333;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';

	}

	.image_4 {
		margin-left: 15rpx;
		margin-top: 8rpx;
		flex-shrink: 0;
	}

	.text_18 {
		margin-bottom: 3rpx;
		color: #333333;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';

	}

	.image_5 {
		margin-left: 12rpx;
		margin-top: 8rpx;
		flex-shrink: 0;
	}

	.text_20 {
		margin-bottom: 3rpx;
		color: #333333;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';

	}

	.image_6 {
		margin-left: 28rpx;
		margin-top: 8rpx;
		flex-shrink: 0;
	}

	.text_23 {
		margin-top: 15rpx;
		align-self: flex-start;
		color: #999999;
		font-size: 24rpx;
		font-family: '.AppleSystemUIFont';

	}

	.group_25 {
		margin-bottom: 6rpx;
	}

	.group_27 {
		margin-bottom: 6rpx;
	}

	.text_30 {
		margin-bottom: 6rpx;
		color: #999999;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';

	}

	.text_31 {
		margin-top: 6rpx;
		color: #333333;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';

	}

	.text_32 {
		margin-bottom: 6rpx;
		color: #999999;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';

	}

	.text_33 {
		margin-top: 6rpx;
		color: #191919;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';

	}

	.text_34 {
		margin-right: 16rpx;
		margin-top: 7rpx;
		color: #999999;
		font-size: 24rpx;
		font-family: '.AppleSystemUIFont';

	}

	.group_31 {
		height: 38rpx;
	}

	.text_22 {
		margin-bottom: 3rpx;
		color: #333333;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';

	}

	.image_7 {
		margin-left: 15rpx;
		margin-top: 8rpx;
		flex-shrink: 0;
	}

	.text_26 {
		margin-bottom: 3rpx;
		color: #333333;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';

	}

	.image_8 {
		margin-left: 15rpx;
		margin-top: 8rpx;
		flex-shrink: 0;
	}

	.text_28 {
		margin-bottom: 3rpx;
		color: #333333;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';

	}

	.image_9 {
		margin-left: 15rpx;
		margin-top: 8rpx;
		flex-shrink: 0;
	}

	.text_35 {
		color: #fff;

		font-size: 25rpx;
		font-family: '.AppleSystemUIFont';

	}

	.text_36 {
		color: #fe641a;
		font-size: 32rpx;
		font-family: '.AppleSystemUIFont';

	}
</style>
